<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue响应式特性演示</title>
    <script src="https://unpkg.com/vue@3.4.0"></script>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
      }
      .demo-section {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
      }
      input {
        padding: 8px;
        margin: 10px 0;
        border: 1px solid #ddd;
        border-radius: 4px;
        width: 300px;
      }
      .output {
        background-color: #f8f9fa;
        padding: 10px;
        border-radius: 4px;
        margin: 10px 0;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <!-- Vue控制的区域 -->
    <div id="app">
      <h1>Vue响应式特性演示</h1>

      <div class="demo-section">
        <h2>双向数据绑定演示</h2>
        <p>在输入框中输入内容，观察View和Model的双向绑定：</p>

        <!-- 输入框 - View改变Model -->
        <div>
          <label>请输入内容：</label>
          <br />
          <input v-model="message" placeholder="在这里输入内容..." />
        </div>

        <!-- 显示内容 - Model改变View -->
        <div class="output">当前内容：{{ message }}</div>

        <p><strong>说明：</strong></p>
        <ul>
          <li>
            当你在输入框中输入内容时，
            <strong>View改变导致Model改变</strong>
          </li>
          <li>
            Model中的数据改变后，立即反映到下方的显示区域，
            <strong>Model改变导致View改变</strong>
          </li>
          <li>这就是Vue的双向数据绑定特性</li>
        </ul>
      </div>
    </div>

    <!-- Vue控制范围外的区域 -->
    <div>
      <h2>Vue控制范围外</h2>
      <p>这里的内容不受Vue控制：{{message}}</p>
      <p>依然故我</p>
    </div>

    <script>
      const { createApp, ref } = Vue
      const App = {
        setup() {
          // 使用ref定义响应式数据
          const message = ref('Hello Vue!')

          return {
            message
          }
        }
      }
      // 返回viewmodel后，可以在浏览器控制台演示改变vm.message值，看到View的变化
      const vm = createApp(App).mount('#app')
      // 访问Vue实例的属性
      console.log('Vue实例的message属性值:', vm.message)
    </script>
  </body>
</html>
